.bgWhite {background-color: white}
.bgGray {background-color: #f2f2f2}
.tCenter {text-align: center}
.tLeft {text-align: left}
.tRight {text-align: right}

.fl {float:left}
.fr {float:right}

.flexWrap { display: flex; flex-wrap: wrap; justify-content:flex-start }
.flexWrapCenter { display: flex; flex-wrap: wrap; justify-content:center; text-align: center; }
.flexWrapBetween { display: flex; flex-wrap: wrap; justify-content:space-between; text-align: center; }
.flexWrapEnd { display: flex; flex-wrap: wrap; justify-content:flex-end; text-align: right; }
.flex {display: flex}
.flexH {display: flex; flex-direction: row}
.flexV {display: flex; flex-direction: column}
.inFlex {display: inline-flex}
.block {display: block}

.pr {position: relative}
.pa {position: absolute;left:0;top:0;width:100%;height:100%}
.pf {position: fixed;left:0;top:0;width:100%;height:100%;}

.fixY {overflow-y: scroll; height: calc(100vh - 140px);}
.fixY::-webkit-scrollbar{display: none}

.mt-5 {margin-top: 5px;}
.mt-10 {margin-top: 10px;}
.mt-15 {margin-top: 15px;}
.mt-20 {margin-top: 20px;}
.mt-30 {margin-top: 30px;}
.mt-40 {margin-top: 40px;}
.mb-10 {margin-bottom: 10px;}
.mb-15 {margin-bottom: 15px;}
.mb-20 {margin-bottom: 20px;}
.mb-30 {margin-bottom: 30px;}
.ml-5 {margin-left:5px;}
.ml-10 {margin-left:10px;}
.ml-15 {margin-left:15px;}
.ml-25 {margin-left:25px;}
.ml-30 {margin-left:30px;}
.mr-5 {margin-right:5px;}
.mr-10 {margin-right:10px;}
.mr-15 {margin-right:15px;}
.mr-25 {margin-right:25px;}
.mr-30 {margin-right:30px;}
.m-30 {margin:30px;}

.pt-20 {padding-top: 20px;}
.pt-30 {padding-top: 30px;}
.pl-20 {padding-left: 20px;}
.pl-30 {padding-left: 30px;}
.pr-20 {padding-right: 20px;}
.pr-30 {padding-right: 30px;}
.p-20 {padding: 20px;}
.p-30 {padding: 30px;}

.w100 {width:100vw}
.w-per100 {width:100%}
.w-px100 {width: 100px !important;}
.w-px200 {width: 200px !important;}
.w-px250 {width: 250px !important;}
.w-px300 {width: 300px !important;}
.w-px350 {width: 350px !important;}
.w-px400 {width: 400px !important;}
.w-px450 {width: 450px !important;}
.w-px500 {width: 500px !important;}
.w-px600 {width: 600px !important;}
.w-px800 {width: 800px !important;}

.h100 {height:100vh}
.h-per100 {height: 100%}

.strike { text-decoration: line-through }

.colorGray {color:#aaaaaa}
.colorOk { color:#09bb07;}
.colorPrimary { color: #409EFF}
.colorError { color:#e64340;}
.colorDisable { color:#888888;}
.colorPlaceHolder { color: #bbbbbb;}
.placeholder { color: #bbbbbb; font-size: 28px; text-align: left; line-height: 40px; }


.hover { -webkit-filter:grayscale(0.2); opacity:0.85;}
.hoverDeep { -webkit-filter:grayscale(0.2); opacity:0.65;}


.formView { position: absolute; left: 0; top: 0; width:100%; height:100% }
.formBtn { position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-color: rgba(0,0,0,0); padding: 0; margin: 0; border: 0; text-align: left; }
.formBtn:before {border: 0}
.formBtn:after {border: 0}

.insideBtn { position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-color: rgba(0,0,0,0); padding: 0; margin: 0; border: 0; text-align: left; }
.insideBtn:before {border: 0}
.insideBtn:after {border: 0}



.line-panel {
    width:100%; background-color:white; border-bottom:1px solid #f8f8f8; text-align:left;

    .line {
        margin-left:25px; padding-right:25px; width:calc(100% - 50px); border-bottom:1px solid #f2f2f2;

        .left {margin-right:20px; height:100%; text-align: left; color:#333333; font-size:30px; overflow:hidden;}
        .left-icon {margin: 0 20px 0 0; width: 50px; height: 100%;}
        .right {margin: 0 20px 0 0; height: 100%; text-align: right; font-size: 26px; color: #555555; overflow:hidden;}
        .right-icon {margin-left: 10px; width: 16px; height: 100%;}
    }
    .line:last-child {border-bottom: 0}
}
.line-panel:first-child {border-top: 1px solid #f8f8f8;}


/*注意： 不能设置 padding-top或者padding-bottom，否则会导致多余行的文字显示出来*/
.txtLine1_NoDots, .txtLine2_NoDots, .txtLine3_NoDots { line-height:1em; overflow:hidden; word-wrap: break-word;}
.txtLine1, .txtLine2, .txtLine3, .txtLine5 { overflow:hidden; white-space:normal; word-wrap: break-word; display: -webkit-box; -webkit-box-orient: vertical;}
.txtLine1_NoDots { height:1em;}
.txtLine2_NoDots { height:2em;}
.txtLine3_NoDots { height:3em;}
.txtLine1 { -webkit-line-clamp: 1;}
.txtLine2 { -webkit-line-clamp: 2;}
.txtLine3 { -webkit-line-clamp: 3;}
.txtLine5 { -webkit-line-clamp: 5;}


.pageView {width: 100%; height: calc(100vh - 100px); font-size: 14px;}
.pageContainer {position: relative; padding: 20px; width: calc(100% - 35px); height: 100%; border: 1px solid #dddddd; border-radius: 5px; background-color: white;}

.page {position: fixed; left: 90px; top:10px; width:calc(100% - 110px); height: calc(100vh - 10px); font-size: 11px; border-radius: 6px; background-color: white}

.pageTop {position: relative; display: flex; padding: 10px 15px; width: calc(100% - 30px); height: 30px; border-bottom: 5px solid #f0f0f0; }

.pageCenter {
    position: fixed; padding: 10px;
    width: calc(100% - 125px); height: calc(100vh - 140px);
    overflow-y: scroll; -webkit-overflow-scrolling: touch; overflow-scrolling: touch;
}
.pageCenter::-webkit-scrollbar{display: none}
.pageCenter {-ms-overflow-style: none; scrollbar-width: none;}

.pageTitle {font-size: 18px; font-weight: bold}

.pageBottom {position: fixed; left: 170px; bottom: 0; padding: 5px 10px; width: calc(100% - 250px); height: 30px; background-color: white}

.page-pop {
  padding: 10px; background-color: white; border-top-left-radius: 10px; border-top-right-radius: 10px; overflow-y: scroll;
}
.page-pop::-webkit-scrollbar{display: none}

.page-sub {
    position: fixed; left: 170px; top:40px; padding: 20px; width: calc(100% - 250px); height: calc(100vh - 80px); background-color: white; border-top-left-radius: 10px; border-top-right-radius: 10px; overflow-y: scroll;

    .ps-content {position: absolute; width: calc(100% - 20px); height: calc(100% - 90px); padding: 10px 10px 40px 10px; overflow-y: auto; overflow-x: hidden;}
    .ps-footer {position: absolute; padding: 20px 0 20px 130px; bottom: 0; left: 0; width: calc(100% - 20px); height: 30px; background-color: white; z-index: 1000}
}
.page-sub::-webkit-scrollbar{display: none}


.dialog {

    .dl-content {
        max-height: calc(100vh - 240px);
        background-color: white; border-radius: 10px; overflow-y: scroll;

    }
    .dl-content::-webkit-scrollbar{display: none}
    .dl-footer {
        margin-top: 10px; width: 100%; text-align: center;
    }
}

.filter-bar {
    margin-right: 5px; height: 28px; line-height: 28px; font-size: 11px; color: #888888;
    img {margin-right: 2px; width: 16px; height: 28px; object-fit: contain}
}

.input-area {height: 25px; line-height: 25px; padding: 0 10px; border-radius: 4px; border: 1px solid #cccccc; outline: none; color: #606266}


.group {
    margin: 0 0 15px 0; width: 100%; line-height: 20px;
    display: flex; flex-wrap: wrap; justify-content:flex-start; text-align: left; font-size: 12px;

    .g-top {margin: 0; width: 100%; font-weight: bold; }
    .g-bottom {margin: 0; width: 100%; }

    .g-left {margin: 0 15px 0 0; width: 80px; text-align: right; font-weight: bold;}
    .g-right {margin: 0; width: calc(100% - 100px);}

    .g-tip {margin: 0; width: 100%; line-height: 20px; color: #666666; font-weight: normal}

    .g-red {margin: 0 5px 0 0; height: 20px; line-height: 20px; font-size: 12px; color: red;}

    .uploader {
        display: flex; flex-direction: column; justify-content: center;
        width: 140px; height: 140px; margin: 10px 10px 0 0;

        .img {width: 140px; height: 140px;}
        .icon {width: 140px; margin-top: 60px;}

        .video-view {
            display: flex; width: 200px; height: 110px; margin: 10px 5px 10px 0;

            .img {width: 200px; height: 110px;}
            .icon {width: 200px; margin-top: 45px;}
        }
    }
    .uploader-small {
        width: 60px; height: 60px; line-height: 60px; margin: 5px 10px 0 0;

        .img {width: 60px; height: 60px;}
        .icon {width: 60px; line-height: 20px;}
    }
}


.line-btns {
    margin: 35px 0 0 0; width: 100%; line-height: 20px;
    display: flex; flex-wrap: wrap; justify-content:center; text-align: center;
}

.btn {padding: 0 10px; height: 25px; line-height: 25px; font-size: 12px; text-align: center; border: 1px solid #eeeeee; border-radius: 4px;}

.tblRow {height: 20px; font-size: 12px}

.separateView {width: 100%; padding: 35px 0 20px 0; margin-bottom: 30px; line-height: 20px; font-size: 18px; font-weight: bold; border-bottom: 1px solid #f0f0f0}
.separateLine {width: 100%; margin-bottom: 10px; height: 1px; background-color: #ddd}


.imgSizeTip {margin: 5px 0; font-size: 12px; font-weight: bold; color: red;}

.table-list-img {object-fit: contain; width: 70px; height: 70px; border-radius: 4px}


.status-ok {font-size: 12px; color:#00a854 !important;}
.status-fail {font-size: 12px; color:#aaaaaa !important;}
.status-normal {font-size: 12px;color:#2d8cf0 !important; }
.status-warn {font-size: 12px;color:#e64340 !important; }

.tag-ok {padding: 5px 10px; border-radius:20px; font-size: 10px;color:#5daf34 !important; background-color: #e1f3d8 !important; }
.tag-fail {padding: 5px 10px; border-radius:20px; font-size: 10px;color:#aaaaaa !important; background-color: #fde2e2 !important;}
.tag-normal {padding: 5px 10px; border-radius:20px; font-size: 10px;color:#2d8cf0 !important; background-color: #ecf5ff !important;}
